{% extends 'base.html' %}
{% block title %}公开课列表 - 慕学在线网{% endblock %}
{% load staticfiles %}

{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
{% endblock %}

{% block custom_bread %}
<section>
    <div class='wp'>
        <ul class="crumbs">
			<li><a href="/">首页</a>></li>
            <li><a href="{% url 'course:course_list' %}">公开课</a>></li>
            <li><a href="{% url 'course:course_detail' course.id %}">课程详情</a>></li>
            <li>章节信息</li>
        </ul>
    </div>
</section>
{% endblock %}

{% block content %}
<div id="main">
        <div class="course-infos">
            <div class="w pr">
                <div style="height: 15px" class="path">
                </div>
                <div class="hd">
                    <h2 class="l">{{ course.name }}</h2>
                </div>
                <div class="statics clearfix">
                    <div class="static-item ">
                        <span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
                        <span class="meta">难度</span>
                        <em></em>
                    </div>
                    <div class="static-item static-time">
                        <span class="meta-value">{{ course.learn_times }}分钟</span>
                        <span class="meta">时长</span>
                        <em></em>
                    </div>
                    <div class="static-item">
                        <span class="meta-value"><strong>{{ course.students }}</strong></span>
                        <span class="meta">学习人数</span>
                        <em></em>
                    </div>
                </div>
            </div>
        </div>
        <div class="course-info-main clearfix w has-progress">
    
            <div class="info-bar clearfix">
            <div class="content-wrap clearfix">
                <div class="content">
                    <div class="mod-tab-menu">
                        <ul class="course-menu clearfix">
                            <li><a class="ui-tabs-active active" id="learnOn"  href="course-video.html"><span>章节</span></a></li>
                            <li><a id="commentOn" class="" href="course-comment.html"><span>评论</span></a></li>
                        </ul>
                    </div>
                    <div id="notice" class="clearfix">
                        <div class="l"> <strong>课程公告:</strong> <a  href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a> </div>
                    </div>
    
                    <div class="mod-chapters">
                        {% for lesson in course.get_course_lesson %}
                        <div class="chapter chapter-active" >
                            <h3>
                                <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                            </h3>
                            <ul class="video">
                                {% for video in lesson.get_lesson_video %}
                                <li>
                                    <a target="_blank" href='{{ video.url }}' class="J-media-item studyvideo">{{ video.name }} ({{video.learn_times}})
                                        <i class="study-state"></i>
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                    </div>
    
                </div>
                <div class="aside r">
                    <div class="bd">
    
                        <div class="box mb40">
                            <h4>资料下载</h4>
                            <ul class="downlist">
                                {% for resource in course.get_course_resource %}
                                <li>
                                    <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                    <a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="box mb40">
                            <h4>讲师提示</h4>
                            <div class="teacher-info">
                                <a href="/u/315464/courses?sort=publish" target="_blank">
                                    <img src='../media/teacher/2016/11/aobama_CXWwMef.png' width='80' height='80' />
                                </a>
            <span class="tit">
              <a href="/u/315464/courses?sort=publish" target="_blank">bobby</a>
            </span>
                                <span class="job">xxx</span>
                            </div>
                            <div class="course-info-tip">
                                <dl class="first">
                                    <dt>课程须知</dt>
                                    <dd class="autowrap">python基础你需要有</dd>
                                </dl>
                                <dl>
                                    <dt>老师告诉你能学到什么？</dt>
                                    <dd class="autowrap">django的进阶开发</dd>
                                </dl>
                            </div>
                        </div>
    
    
                        <div class="cp-other-learned  js-comp-tabs">
                            <div class="cp-header clearfix">
                                <h2 class="cp-tit l">该课的同学还学过</h2>
                            </div>
                            <div class="cp-body">
                                <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                    <!-- img 200 x 112 -->
                                    <ul class="other-list">
                                        
                                        <li class="curr">
                                            <a href="course-detail.html" target="_blank">
                                                <img src="../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg" alt="django与vuejs实战项目2">
                                                <span class="name autowrap">django与vuejs实战项目2</span>
                                            </a>
                                        </li>
                                        
                                        <li class="curr">
                                            <a href="course-detail.html" target="_blank">
                                                <img src="../media/courses/2016/12/python面向对象.jpg" alt="python面向对象">
                                                <span class="name autowrap">python面向对象</span>
                                            </a>
                                        </li>
                                        
                                        <li class="curr">
                                            <a href="course-detail.html" target="_blank">
                                                <img src="../media/courses/2016/12/python文件处理.jpg" alt="python文件处理">
                                                <span class="name autowrap">python文件处理</span>
                                            </a>
                                        </li>
                                        
                                        <li class="curr">
                                            <a href="course-detail.html" target="_blank">
                                                <img src="../media/courses/2016/11/mysql.jpg" alt="django入门">
                                                <span class="name autowrap">django入门</span>
                                            </a>
                                        </li>
                                        
                                        <li class="curr">
                                            <a href="course-detail.html" target="_blank">
                                                <img src="../media/courses/2016/12/mysql.jpg" alt="xadmin进阶开发">
                                                <span class="name autowrap">xadmin进阶开发</span>
                                            </a>
                                        </li>
                                        
                                    </ul>
                                </div>
                                <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
                                    <ul class="other-list">
                                        <li class="curr">
                                            <a href="/course/programdetail/pid/31?src=sug" target="_blank">
                                                <img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg" alt="Java工程师">
                                                <span class="name autowrap">Java工程师</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
    
                    </div>    </div>
            </div>
            <div class="clear"></div>
    
        </div>
    
    </div>
    </div>
{% endblock %}
